<!--
 * @Author: 华芊芊 huaqianqian@yeah.net
 * @Date: 2023-10-13 21:51:11
 * @LastEditors: 华芊芊 huaqianqian@yeah.net
 * @LastEditTime: 2023-10-14 12:15:51
 * @FilePath: \zmglpt-ui-screen\src\common\echart\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from "./theme.json"; // 引入默认主题

export default {
  name: "echart",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "2.5rem",
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    options: {
      handler(options) {
        // 设置true清空echart缓存
        // this.chart.setOption(options, true)
        this.initChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
    this.initChart();
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, "tdTheme");
      this.chart.setOption(this.options, true);
      this.chart.off("legendselectchanged");
      this.chart.on("legendselectchanged",  (obj)=> {
        // console.log(obj,'0bj=======================');
        // let selected = obj.selected;
        // let name = obj.name;
        let selectArr = [];
        for (const key in obj.selected) {
          if (obj.selected[key]) {
            selectArr.push(key);
          }
        }
        // console.log(selectArr,'=============');
        // let result = 0;
        // selectArr.forEach((k) => {
        //   dataList.forEach((cur) => {
        //     if (k === cur.name) {
        //       result += cur.value;
        //     }
        //   });
        // });
        this.$emit('setTotal',selectArr);
        
        // console.log(tot,'=========222======');
        // this.chart.setOption(option,true);
      });
      this.chart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 每个legend的index
        // console.log(legendDataIndex,'=====================');
        this.$emit("retailerIntro", legendDataIndex);
      });
      this.chart.getZr().on("mouseout", (event) => {
        this.$emit("retailerIntroHide");
      });
    },
  },
};
</script>

<style>
</style>
